<template>
  <tbody>
    <tr v-for="l in list" :key="l.productId">
      <td><input type="Checkbox" /></td>
      <td>
        <div class="info">
          <img :src="l.productUrl" />
          <span class="name">{{ l.productName }}</span>
          <span class="spec">
            <p v-if="l.spec['选择颜色']">{{ l.spec['选择颜色'] }}</p>
            <p v-if="l.spec['选择容量']">{{ l.spec['选择容量'] }}</p>
          </span>
        </div>
      </td>
      <td>{{ '¥' + l.productPrice.toFixed(2) }}</td>
      <td>
        <div class="num">
          <button @click="sub">-</button>
          <p>{{ l.goodsNum }}</p>
          <button @click="add">+</button>
        </div>
      </td>
      <td>{{ '¥' + (l.productPrice * l.goodsNum).toFixed(2) }}</td>
      <td>
        <a href="">删除</a>
      </td>
    </tr>
  </tbody>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    sub() {},
    add() {}
  }
}
</script>

<style scoped>
tr {
  text-align: center;
  /* border: 1px solid #000; */
}
tr td:nth-child(2) {
  width: 50%;
}
td div {
  display: flex;
  /* border: 1px solid #000; */
}
td div.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
td div.info img {
  width: 20%;
  /* border: 1px solid #000; */
}
td div.info span.name {
  width: 60%;
  /* border: 1px solid #000; */
}
td div.info span.spec {
  width: 20%;
  display: flex;
  flex-direction: column;
  /* border: 1px solid #000; */
}
td div.num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: 1px solid #000; */
}
td div.num button {
  width: 33%;
  font-size: 20px;
  cursor: pointer;
  border: 1px solid #adadad;
}
td div.num p {
  width: 33%;
  font-size: 18px;
  border: 1px solid #adadad;
}
</style>
